<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色详情 - 权限管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8fafc;
        }

        .sidebar {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            height: 100vh;
            position: fixed;
            width: 280px;
            box-shadow: 5px 0 15px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .main-content {
            margin-left: 280px;
            padding: 30px;
            min-height: 100vh;
        }

        .nav-link {
            color: rgba(255,255,255,0.9) !important;
            padding: 15px 25px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .nav-link:hover {
            background: rgba(255,255,255,0.15);
            padding-left: 30px;
            color: white !important;
        }

        .nav-link.active {
            background: rgba(255,255,255,0.2);
            border-left: 4px solid white;
            color: white !important;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            margin-bottom: 25px;
        }

        .menu-tree {
            list-style: none;
            padding-left: 0;
        }

        .menu-item {
            padding: 12px 15px;
            border-radius: 8px;
            background: #f8f9fa;
            margin: 5px 0;
            border-left: 4px solid var(--primary-color);
        }

        .menu-children {
            padding-left: 30px;
            margin-top: 8px;
        }

        .menu-icon {
            width: 30px;
            text-align: center;
            margin-right: 10px;
            color: var(--primary-color);
        }

        .role-info {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="p-4">
        <div class="d-flex align-items-center mb-3">
            <div style="width: 50px; height: 50px; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center;" class="me-3">
                <i class="fas fa-shield-alt text-primary"></i>
            </div>
            <div>
                <h5 class="mb-0">权限管理系统</h5>
                <small class="opacity-75">角色详情</small>
            </div>
        </div>
        <p class="mb-0 text-light opacity-75">
            <i class="fas fa-user me-2"></i><span th:text="${currentUser.name}">用户</span>
        </p>
    </div>
    <nav class="nav flex-column">
        <a class="nav-link" href="/dashboard">
            <i class="fas fa-home me-3"></i>系统首页
        </a>
        <a class="nav-link" href="/user/management">
            <i class="fas fa-users me-3"></i>用户管理
        </a>
        <a class="nav-link active" href="/role/management">
            <i class="fas fa-user-shield me-3"></i>权限管理
        </a>
        <a class="nav-link" href="/user/profile">
            <i class="fas fa-user-cog me-3"></i>个人信息
        </a>
        <a class="nav-link" href="/logout">
            <i class="fas fa-sign-out-alt me-3"></i>退出登录
        </a>
    </nav>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-1">
                <i class="fas fa-user-shield me-2 text-primary"></i>角色权限详情
            </h2>
            <p class="text-muted mb-0">查看角色详细信息和权限配置</p>
        </div>
        <a href="/role/management" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i>返回列表
        </a>
    </div>

    <div th:if="${role}" class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="fas fa-info-circle me-2"></i>
                <span th:text="${role.name}">角色名称</span> - 权限详情
            </h5>
        </div>
        <div class="card-body">
            <!-- 角色基本信息 -->
            <div class="role-info">
                <div class="row">
                    <div class="col-md-6">
                        <strong>角色名称：</strong>
                        <span th:text="${role.name}"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>角色键：</strong>
                        <span class="badge bg-light text-dark" th:text="${role.roleKey}"></span>
                    </div>
                    <div class="col-md-6 mt-2">
                        <strong>状态：</strong>
                        <span th:if="${role.status == 0}" class="badge bg-success">正常</span>
                        <span th:if="${role.status == 1}" class="badge bg-danger">禁用</span>
                    </div>
                    <div class="col-md-6 mt-2">
                        <strong>创建时间：</strong>
                        <span th:text="${#temporals.format(role.createTime, 'yyyy-MM-dd HH:mm')}"></span>
                    </div>
                </div>
                <div class="mt-3">
                    <strong>描述：</strong>
                    <p class="mb-0 opacity-90" th:text="${role.description}"></p>
                </div>
            </div>

            <!-- 菜单权限 -->
            <h6 class="mt-4 mb-3">
                <i class="fas fa-list-alt me-2 text-success"></i>菜单权限列表
            </h6>
            <div class="menu-tree">
                <div th:each="menu : ${role.menus}">
                    <div class="menu-item">
                        <div class="d-flex align-items-center">
                                <span class="menu-icon">
                                    <i th:if="${menu.type == 0}" class="fas fa-folder"></i>
                                    <i th:if="${menu.type == 1}" class="fas fa-file"></i>
                                    <i th:if="${menu.type == 2}" class="fas fa-cog"></i>
                                </span>
                            <div class="flex-grow-1">
                                <strong th:text="${menu.name}"></strong>
                                <div th:if="${menu.url}" class="text-muted small" th:text="${menu.url}"></div>
                            </div>
                            <span th:if="${menu.type == 0}" class="badge bg-primary">目录</span>
                            <span th:if="${menu.type == 1}" class="badge bg-success">菜单</span>
                            <span th:if="${menu.type == 2}" class="badge bg-warning">按钮</span>
                        </div>
                    </div>
                </div>
                <div th:if="${role.menus == null or role.menus.isEmpty()}" class="text-center py-4 text-muted">
                    <i class="fas fa-inbox fa-2x mb-3"></i>
                    <p>该角色暂无菜单权限</p>
                </div>
            </div>
        </div>
    </div>

    <div th:unless="${role}" class="card">
        <div class="card-body text-center py-5">
            <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
            <h5 class="text-muted">角色信息不存在</h5>
            <p class="text-muted">请返回角色列表重新选择</p>
            <a href="/role/management" class="btn btn-primary mt-3">
                <i class="fas fa-arrow-left me-2"></i>返回角色列表
            </a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>